<template>
  <Modal
    v-model="modal"
    title="选择用户"
    :mask-closable="false"
    draggable
    sticky
    scrollable
    @on-cance="cancel"
    @on-visible-change="cancel"
    width="900px"
    height="500px"
  >
    <searchGroup
      v-model="searchObj"
      :options="searchOptions"
      @search="getUserList(true)"
    />
    <vxe-table
      ref="tableRef"
      :data="tableData"
      border="none"
      sync-resize
      size="small"
      stripe
      :min-height="50"
      class="right_table"
      :max-height="400"
      :loading="true"
    >
      <vxe-column type="checkbox" width="50" align="center" fixed="left"></vxe-column>
      <vxe-column title="用户" field="username"> </vxe-column>
      <vxe-column title="姓名" field="uname"> </vxe-column>
      <vxe-column title="电子邮件" field="email"> </vxe-column>
      <vxe-column title="手机" field="mobile"> </vxe-column>
      <vxe-column title="组长" field=""> </vxe-column>
    </vxe-table>
    <!-- <div class="page_box">
      <Page
        v-model="pageIndex"
        :page-size="pageSize"
        :total="total"
        show-elevator
        show-total
        @on-change="getUserList()"
      />
    </div> -->
    <template #footer>
      <Button @click="cancel">取消</Button>
      <Button type="primary" @click="submit">确定</Button>
    </template>
  </Modal>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { userList, organAddUser } from '@/api/modules/department';
import { Message } from 'view-ui-plus';

const emit = defineEmits(['cancel', 'submit']);

// 是否打开弹窗
const modal = true;

// 当前对象
const { proxy } = getCurrentInstance();
// 加载
const loading = ref(true);
// 表单元素对象
const tableRef = ref(null);
const pageIndex = ref(1);
const pageSize = 20;
const total = ref(0);

// 列表数据
const tableData = ref([]);
// 搜索条件字段
const searchObj = ref({
  username: '',
  mobile: '',
  email: '',
});
// 搜索条件配置
const searchOptions = ref([
  {
    type: 'input',
    model: 'username',
    placeholder: '请输入关键字',
    label: '用户:',
  },
  {
    type: 'input',
    model: 'mobile',
    placeholder: '请输入关键字',
    label: '手机:',
  },
  {
    type: 'input',
    model: 'email',
    placeholder: '请输入关键字',
    label: '电子邮件:',
  },
]);

const organId = ref('');

const initDialog = (id) => {
  organId.value = id;
  getUserList(true);
};

const getUserList = (reset) => {
  if (reset) {
    pageIndex.value = 1;
  }
  loading.value = true;
  userList({
    query: {
      p: pageIndex.value,
      ps: 9999,
    },
    data: {
      ...searchObj.value,
    },
  }).then(({ data }) => {
    tableData.value = data.topicList;
    total.value = data.totalElements;
    loading.value = false;
  });
};

// 选择
const getSelectEvent = () => {
  const $table = tableRef.value
  if ($table) {
    const selectRecords = $table.getCheckboxRecords()
    return selectRecords.map(item => item.id)
  }
}

/**
 * 确认提交
 */
const submit = () => {
  
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: `<p>是否加入该部门?</p>`,
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      const ids = getSelectEvent();
      const data = ids.map(id => {
        return {
          id,
          organ: organId.value
        }
      })
      await organAddUser({
        data: data,
      });
      Message.success('确认加入');
      emit('submit');
    },
  });
};
/**
 * 取消
 */
const cancel = () => {
  emit('cancel');
};

defineExpose({
  initDialog
})
</script>

<style></style>
